<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/magnifier.css" />
  </head>
  <body>
    <div id="box">
      <div id="left">
        <img src="img/magnifier/img.png" id="imgs1" />
        <div id="mask"></div>
      </div>
      <div id="right">
        <div id="border">
          <img src="img/magnifier/img.png" id="img2" />
        </div>
      </div>
    </div>
    <script>
    function getStyle(el,attr){
      if( typeof attr === "undefined") {
        return getComputedStyle(el);
      }
      return parseFloat(getComputedStyle(el)[attr]);
    }
     window.onload=()=>{
        let mask = document.querySelector("#mask");
        let img1 = document.querySelector("#imgs1");
        let img2 = document.querySelector("#img2");
        let border = document.querySelector("#border");
        let left = document.querySelector("#left");
        let rightBox = document.querySelector('#right');
        rightBox.style.display = "block";
        let scaleX = getStyle(img2,"width")/ getStyle(img1,"width");
        let scaleY = getStyle(img2,"height")/ getStyle(img1,"height");
        
        //遮罩的宽高要大一点，不然右边的会有留底的情况
        mask.style.width = getStyle(border,"width") / scaleX + "px";
        mask.style.height = getStyle(border,"height") / scaleY + "px";
        rightBox.style.display = "none";
        console.log( scaleX , scaleY )

        left.addEventListener("mouseenter",(e)=> {
            
            mask.style.display = "block" ;
            rightBox.style.display = "block";
        });

        left.addEventListener("mouseleave",()=> {
            mask.style.display = "none" ;
            rightBox.style.display = "none";
        });


        //移入的时候触发

        left.onmousemove = function(e){
            let L = e.clientX -  left.getBoundingClientRect().left - mask.clientWidth /2 ,
                Y = e.clientY - left.getBoundingClientRect().top -  mask.clientHeight /2;
           
                
            let maxLeft = left.clientWidth - mask.clientWidth ;
            let maxBottom = left.clientHeight - mask.clientHeight ;
            //边界限制
          
            // if( L < 0 ) {
            //     L = 0;
            // }
            // if( Y < 0 ) {
            //     Y = 0 ;
            // }

            // if( L > left.clientWidth - mask.clientWidth ) {
            //     L =  left.clientWidth - mask.clientWidth + 'px' ;
            // }

            // if( Y > left.clientHeight - mask.clientHeight ) {
            //     Y =  left.clientHeight - mask.clientHeight + 'px' ;
            // }

            // 利用Math.max 和 Math.min的写法求最大值和最小值

            L = Math.max( 0 , L);
            L = Math.min( L,maxLeft);
            Y = Math.max( 0, Y );
            Y = Math.min( maxBottom, Y );
            
            mask.style.left = L + 'px';
            mask.style.top = Y + 'px';

            /** 
             *  右边的放大的图片  
             *   求x : img2 / img1 = 未知 / L ,img2/img1就是scaleX 所以 scaleX = x / L ,最后就是 x = scaleX * L
             *   求y : img2 / img1 = 未知 / Y ,img2/img1就是scaleY 所以 scaleY = x / Y  ,最后就是 y = scaleY * Y
             **/
           
             img2.style.left = - scaleX * L + 'px' ;
             img2.style.top = - scaleY * Y + 'px' ;

        }



      }
    </script>
  </body>
</html>
